<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Height Converter</title>
</head>


<body style="background-image: url('heightconverter.jpg');">

	<div class="background_image">
		<div class="overlay_effect">
		  <div class="Container">
			<h1 style="color:yellow">Height Converter<hr></h1>
			<h2 style="color:rgb(21, 21, 20)">Feet+Inches to Centimeters<hr></h2>
			<div class="box">
			  <div id="feet">
				<label>Feet:</label><input class="feet" type="text" placeholder="Enter feet"/>
			  </div>
			  <div id="inches">
				  <label>Inches:</label><input class="inches" type="text" placeholder="Enter inches"/>
			  </div>
			  <div class="button_container">
				<!--calculate button-->
				<button id="clickme" class="button1">Calculate</button>
				<!--reset button-->
				<button id="reset" class="button2">Reset</button>
			 </div>
			<center><p class="output"></p></center>
			</div> 
		  </div>
		</div>
	  </div>
	  <script src ="heightconverter.js"> </script>

</body>
</html>


